<div class="app-content-inner">
  <div class="box">
    <div class="p-h-md p-v bg-white box-shadow pos-rlt">
      <h3 class="no-margin">Google Maps</h3>
    </div>
    <div class="box-row">
      <div class="box-cell">
        <div class="box-inner">
          <div class="box">
            <div class="col-md-3 hide">
              <div class="box">
                <div class="box-row">
                  <div class="box-cell">
                    <div class="box-inner">
                      <div class="p-md">                        
                        <div class="hide">
                          <h5 class="no-margin m-b">Click to add a marker! (There is a bug on the event when using lazy load. bind twice on click event)</h5>
                          <p>{{zoomMessage}}</p>
                          <ul class="list-unstyled list-inline">
                            <li ng-repeat="marker in myMarkers">
                              <a class="btn btn-default m-b-sm" ng-click="myMap.panTo(marker.getPosition())">
                                Pan to Marker {{$index}}
                              </a>
                            </li>
                          </ul>
                        </div>
                        <!-- this is the confusing part. we have to point the map marker directive
                              at an existing google.maps.Marker object, so it can hook up events -->
                        <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
                             ui-event="{'map-click': 'openMarkerInfo(marker)'}">
                        </div>

                        <div ui-map-info-window="myInfoWindow">
                          <div class="m-b-sm">Marker</div>
                          <div class="m-b-sm">
                            <div class="pull-left m-t-xs">Lat: </div>
                            <input ng-model="currentMarkerLat" class="form-control input-sm w-sm m-l-lg">
                          </div>
                          <div class="m-b-sm">
                            <div class="pull-left m-t-xs">Lng: </div>
                            <input ng-model="currentMarkerLng" class="form-control input-sm w-sm m-l-lg">
                          </div>
                          <a class="btn btn-default btn-sm m-l-lg m-b-sm" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-9">
              <div style="position:relative; height:100%; min-height:320px" ui-map="myMap"
                   ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
                   ui-options="mapOptions">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>  
</div>